  $(function() {
      // 1.1 获取裁剪区域的 DOM 元素
      var $image = $('#image')
          // 1.2 配置选项
      const options = {
          // 纵横比
          aspectRatio: 1,
          // 指定预览区域
          preview: '.img-preview'
      }

      // 1.3 创建裁剪区域
      $image.cropper(options)
      console.log($('#baseclick'));
      $('#baseclick').click(function() {
              //点击按钮选择图片
              $('#optionclick').click();
              $('#optionclick').on('change', function() {

                  //console.log(43);
                  let file = this.files[0];
                  if (file == undefined) {

                      return layui.layer.msg("头像不能为空")
                  }
                  console.log(file);

                  let url = URL.createObjectURL(file)
                  console.log(url);
                  //复制代码
                  $image
                      .cropper('destroy') // 销毁旧的裁剪区域
                      .attr('src', url) // 重新设置图片路径
                      .cropper(options) // 重新初始化裁剪区域

              })

          })
          //上传图片
      $('#readyclick').click(function() {
          var dataURL = $image
              .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                  width: 100,
                  height: 100
              })
              .toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

          console.log(dataURL);
          //上传图片
          axios({
              method: 'POST',
              url: '/my/update/avatar',

              data: "avatar=" + encodeURIComponent(dataURL)
          }).then(res => {
              console.log(res);
              if (res.data.status == 1) {
                  layui.layer.msg(res.data.message)
              }
              //成功时提示并且刷新图片
              layui.layer.msg('上传成功');
              //刷新信息
              window.parent.getUserInfo();
          })






      })




  })